@import './swiper/swiper.wxss';

.goods {
  width: 100vw;
  height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 100rpx;

  .totip {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .name {
      font-size: 40rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
    }

    .bottom {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        color: #fd3838;
        font-size: 40rpx;

        .price-num {
          display: inline;
        }

        .price-num :last-child {

          font-size: 30rpx;
        }

        .line {
          font-size: 30rpx;
          margin-left: 20rpx;
          text-decoration-line: line-through;
          color: rgb(143, 140, 140);
        }

      }

      .num {
        color: rgb(143, 140, 140);
      }
    }
  }

  .server {
    margin-top: 20rpx;

    .van-cell-text {
      color: rgb(138, 136, 136);
      margin-right: 20rpx;
    }
  }

  .detials {
    width: 100%;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;

    .title {
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eeeeee;
    }
  }

  .car-list {
    width: 100%;
    height: 100%;

    .car-item {
      margin-bottom: 10rpx;
    }
  }

  .spec {
    height: 100%;
    position: relative;
    padding: 20rpx 0 40rpx;

    .spec-price {
      padding: 0 30rpx;
      z-index: 1;
      background-color: #fff;
      position: sticky;
      top: 0;
      color: #f32b2b;
      font-size: 40rpx;
      font-weight: bold;
      padding-bottom: 10rpx;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      .left {
        .first {
          font-weight: 400;
          font-size: 30rpx;
        }

        .inactive {
          font-weight: 400;
          color: #6d6b6b;
          font-size: 30rpx;
        }
      }
      .right{
        width: 50rpx;
        height: 50rpx;
      }

    }

    .spec-img {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;

      .img {
        width: 150rpx;
        height: 150rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }

      .active {
        border: 2px solid #ff819e;
      }
    }

    .label {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10rpx 20rpx;

      .label-item {
        padding: 10rpx 20rpx;
        background-color: #f7f8fa;

        :first-child {
          color: #000;
        }
      }

      .config,
      .type {
        background-color: #f7f8fa;
        color: #000;
        padding: 10rpx 20rpx;
      }
      .type{
        margin-bottom: 40rpx;
      }
      .active {
        background-color: #fff2f5;
        color: #ff819e;
      }
    }
  }

}